<script>
export default {
  name: "Sshenhe",
  data() {
    return {
      rr:false,
      value: '',
      option: [
        {
          value: 'S001-0',
          label: '未审核'
        },
        {
          value: 'S001-2',
          label: '未通过'
        },
        {
          value: '',
          label: '全部'
        }
      ],
      // 商户状态
      yy:'',
      // 修改商户状态
      type:'',
      // 禁用
      dis:true,
      dis1:false,
      //商户禁用
      gis:false,
      // 详情
      dialogVisible: false,
      dialogVisible1: false,
      designFileTable: [],
      // 页号
      current: 1,
      // 页大小
      size: 2,
      // 总记录数
      total: 0,
      // 分页列表
      pageList: [2, 5, 10, 20],
      // 查询表单对象
      designFileSearchForm: {
        isBusinesses:'',
        isVendor:''
      },
      //商户表单
      businesses:{
        isBusiness:''
      },
      //供应商表单
      vendor:{
      },
    }
  },
  methods: {
    // 页大小改变事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.designFileChaXun()
      //清空表单
      this.designFileSearchForm = {}
    },
    // 页号改变事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.designFileChaXun()
    },
    // 查询档案
    designFileChaXun() {
      //下拉框赋值给表单
      this.designFileSearchForm.checkTag = this.value
      console.log(4444,this.designFileSearchForm)
      this.$axios.post(`/Businesses/select?pageNum=${this.current}&pageSize=${this.size}`,
          this.designFileSearchForm)
          .then(r => {
            console.log('r', r.data)
            // 取出rows属性，请求页的数据集合
            this.designFileTable = r.data.rows
            // 取出total属性，总记录数
            this.total = r.data.total
          })
    },
    //注销
    handleEdit( index, row){
      //获取当前行数据
      console.log(3435,row)
      this.$axios.delete(`/Businesses/deleteById/${row.userId}`)
          .then(r => {
            //提示
            this.$message({
              message: '注销成功',
              type: 'success'
            })
            this.designFileChaXun()
          })
    },
    //商户查看详情
    handleEdit1( index, row,rr){
      if(rr=='S001-2'){
        this.rr = true
      }else {
        this.rr = false
      }
      //获取当前行数据
      console.log(999995,row)
      this.$axios.post(`/Businesses/selectById?id=${row.id}`)
          .then(r => {
            console.log('r', r.data)
            this.businesses = r.data
            this.dis = false
            this.dis1 = true
          })
    },
    //返回
    handleReset(){
      this.dis = true
      this.dis1 = false
      this.gis = false
    },
    //停业修正
    handleEdit6(pp,pp1){
      console.log(999995,pp,pp1)
     //获取表单数据
      console.log(999995,this.businesses)
      //判断表单的审核时间 审核意见是否有值
      if(this.businesses.checkTime == null || this.businesses.auditOpinion == null|| this.businesses.checkTime == ''|| this.businesses.auditOpinion == '') {
        //提示
        this.$message({
          message: '请填写审核时间或审核意见',
          type: 'warning'
        })
      }else {
        this.businesses.isBusiness = pp1
        this.businesses.checkTag = pp
        this.$axios.put(`/Businesses/updateById`,this.businesses)
            .then(r => {
                  this.businesses.isBusinesses = pp1
              console.log(44444,this.businesses)
              this.$axios.put(`/zhuche/updateById1`,this.businesses)
                  .then(r => {
                    console.log('r', r.data)
                    this.$message({
                      message: '审核完成',
                      type: 'success'
                    })
                    this.designFileChaXun()
                    this.dis = true
                    this.gis = false
                    this.dis1 = false
                  })
            })
      }
    }
  },
  created() {
    this.designFileChaXun()
  },
  watch:{
      // 监听下拉框
      value()
          {
            this.designFileChaXun()
          }
  }
}
</script>

<template>
  <div id="Sshenhe">
    <el-form v-show="dis" :inline="true" :model="designFileSearchForm" class="demo-form-inline">
      <el-form-item label="">
        <el-select v-model="value" placeholder="请选择">
          <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <!--基础表格-->
    <el-table v-show="dis"
              border
              :data="designFileTable"
              style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userAvatar"
          label="头像图标"
          width="180">
        <template
            slot-scope="scope">
          <img :src="scope.row.userAvatar" alt="" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userSex"
          label="性别"
          width="180">
      </el-table-column>
      <el-table-column
          prop="isBusinesses"
          label="审核状态"
          width="180"
      >
        <template
            slot-scope="scope">
          <el-button style="width: 100px;height: 40px" type="success" v-if="scope.row.checkTag != 'S001-0'" @click="handleEdit1(scope.$index, scope.row, 'S001-2')">未通过</el-button>
          <el-button style="width: 100px;height: 40px" type="success" v-if="scope.row.checkTag == 'S001-0'" @click="handleEdit1(scope.$index, scope.row)">审核</el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="op"
          label="操作"
          width="180">
        <!--作用域插槽-->
        <template slot-scope="scope">
          <el-button type="danger" @click="handleEdit(scope.$index, scope.row)">删除记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination v-show="dis"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="current"
                   :page-sizes="pageList"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <!--商户表单-->
    <el-card v-show="dis1">
      <el-descriptions  class="margin-top" title="审核信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            营业执照
          </template>
          <img style="width: 130px;height: 130px;" class="img" :src="businesses.license" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            门店图片
          </template>
          <img style="width: 130px;height: 130px;" class="img" :src="businesses.storePicture" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            店铺名称
          </template>
          {{ businesses.storeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            身份证
          </template>
          {{ businesses.identityCard }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            负责人
          </template>
          {{ businesses.chargePerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ businesses.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            门店位置
          </template>
          {{ businesses.location }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            审核时间
          </template>
          <el-date-picker
              v-model="businesses.checkTime"
              type="datetime"
              :disabled="rr"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 190px;">
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            审核意见
          </template>
          <el-input
              v-model="businesses.auditOpinion"
              type="textarea"
              :disabled="rr"
              :rows="2"
              placeholder="请输入内容">
          </el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <el-button style="width: 100px;background-color:#B3C0D1;border: gray"  @click="handleReset">返回</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button v-show="!rr" type="primary"@click="handleEdit6('S001-1',1)">通过</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button v-show="!rr" type="danger"@click="handleEdit6('S001-2',0)">不通过</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!--供应商表单-->
    <el-row v-show="gis" style="margin: auto;">
      <el-col :span="12">
        <el-form :model="vendor" label-width="80px" style="margin: auto;width: 1400px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="营业执照:" prop="picture" class="color1">
                <el-upload
                    :disabled="true"
                    v-model="vendor.license"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false">
                  <img v-if="vendor.license" :src="vendor.license" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="许可证:" prop="picture" class="color1">
                <el-upload
                    :disabled="true"
                    v-model="vendor.permit"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false">
                  <img v-if="vendor.permit" :src="vendor.permit" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="供应名称:" class="color1">
                <span>{{vendor.vendorName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话:" class="color1">
                <span>{{vendor.phone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系人:" class="color1">
                <span class="type">{{vendor.associates}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="位置:" class="color1">
                <span>{{vendor.address}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="审核意见:" class="color1">
                <template>
                  <span>{{vendor.auditOpinion}}</span>
                </template>
              </el-form-item>
            </el-col>
            <el-col
                :span="6">
              <el-form-item label="审核时间:" class="color1">
                <el-date-picker
                    v-model="vendor.checkTime"
                    type="datetime"
                    :disabled="true"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 190px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="账号余额:" class="color1">
                <span>{{vendor.balance}}.00</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button style="width: 100px;background-color:#B3C0D1;border: gray"  @click="handleReset">返回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

  </div>
</template>

<style>
#Sshenhe {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>